import React, {useEffect, useState} from 'react'
import {Form, Button, Input, Modal, Row, Col, Select} from 'antd'
import {connect} from 'umi'
import {propertyList} from '@/utils/constant'

const FormItem = Form.Item;
const {Option} = Select;

const formLayout = {
  labelCol: {span: 7},
};

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
};

const AddForm = (props) => {
  const {onSubmit, onCancel, loading, record, visible} = props;
  const [form] = Form.useForm();
  const [title, setTitle] = useState(null);

  useEffect(() => {
    if (record) {
      setTitle("编辑合同主体");
      form.setFieldsValue(record);
    } else {
      setTitle("新增合同主体");
    }
  }, [visible]);

  const filterOption = (input, option) => {
    return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
  };

  const onFormCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    onSubmit({
      ...fieldsValue,
      id: record && record.id
    })
  };

  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col {...colStyle}>
            <FormItem name="name" label="甲方名称" rules={[{required: true, message: '甲方名称不能为空'}]}>
              <Input placeholder="请输入甲方名称"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="representative" label="法人姓名" rules={[{required: true, message: '法人姓名不能为空'}]}>
              <Input placeholder="请输入法人姓名"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="property" label="企业性质" rules={[{required: true, message: '企业性质不能为空'}]}>
              <Select placeholder="请选择企业性质" showSearch filterOption={filterOption}>
                {propertyList.map((item, index) => {
                  return (
                    <Option value={item.value} key={index}>
                      {item.label}
                    </Option>
                  )
                })}
              </Select>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="registeredAddress" label="注册地址" rules={[{required: true, message: '注册地址不能为空'}]}>
              <Input placeholder="请输入注册地址"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="initiatorAccountId" label="监印员id" rules={[{required: true, message: '监印员id不能为空'}]}>
              <Input placeholder="请输入监印员id"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="initiatorName" label="监印员名称" rules={[{required: true, message: '监印员名称不能为空'}]}>
              <Input placeholder="请输入监印员名称"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="authorizationOrganizeId" label="e签宝内部企业id"
                      rules={[{required: true, message: 'e签宝内部企业id不能为空'}]}>
              <Input placeholder="请输入e签宝内部企业id"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="eSignOrgId" label="e签宝签署公司id" rules={[{required: true, message: 'e签宝签署公司id不能为空'}]}>
              <Input placeholder="请输入e签宝签署公司id"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="sealId" label="印章id" rules={[{required: true, message: '印章id不能为空'}]}>
              <Input placeholder="请输入印章id"/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" loading={loading} onClick={() => handleSubmit()}>提交</Button>
      </>
    )
  };

  return (
    <Modal
      width='70%'
      destroyOnClose
      title={title}
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      onClose={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        style={{paddingTop: '24px'}}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
};

export default connect(() => ({}))(AddForm)
